<template>
  <div v-if="hasChildNode" class="cell">
    <span class="icon" :style="iconStyle" @click="handlerClick">&gt;</span>
    <div>
      <slot :index="slotProps.index" :row="slotProps.row" />
    </div>
  </div>
  <div v-else class="cell">
    <div :style="lastNodeStyle">
      <slot :index="slotProps.index" :row="slotProps.row" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Cell',

  inject: ['handlerClickTree'],

  data() {
    return {
      hasChildNode: false,

      haslastNodeStyle: false
    }
  },

  computed: {
    slotProps() {
      return {
        row: this.$parent.row ? this.$parent.row : {},
        index: this.$parent.index ? this.$parent.index : 0
      }
    },

    isSlotData() {
      return this.slotProps.row && Object.keys(this.slotProps.row).length > 0
    },

    iconStyle() {
      return {
        transform: `tanslateX(${this.slotProps.row.level * 30}px)`
      }
    },

    lastNodeStyle() {
      return this.haslastNodeStyle
        ? { paddingLeft: this.slotProps.row.level * 30 + 'px' }
        : { width: '100%', height: '100%' }
    }
  },

  methods: {
    handlerClick() {
      this.handlerClickTree(this.slotProps.row)
    }
  },

  mounted() {
    // 是否拥有子节点
    this.hasChildNode = this.$el.parentNode.getAttribute('hasChildNode')
    // 是否是当前树的最后子节点
    this.haslastNodeStyle = this.$el.parentNode.getAttribute('haslastNodeStyle')
  }
}
</script>
<style scoped>
.cell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  cursor: pointer;
}
</style>
